<template>
  <h2
    :style="'color:rgba(38, 38, 38, 1)'"
    class="mb-6.5 text-2xl font-bold xl:text-3xl enter-x"
    :class="prefixCls"
  >
    用户登录
    <span class="login-bg"></span>
  </h2>
</template>
<script lang="ts" setup>
  // import { computed, unref } from 'vue';
  // import { useI18n } from '/@/hooks/web/useI18n';
  // import { LoginStateEnum, useLoginState } from './useLogin';
  import { useDesign } from '/@/hooks/web/useDesign';

  // const { t } = useI18n();

  // const { getLoginState } = useLoginState();
  const { prefixCls } = useDesign('login-form-title');
  // const getFormTitle = computed(() => {
  //   const titleObj = {
  //     [LoginStateEnum.RESET_PASSWORD]: t('sys.login.forgetFormTitle'),
  //     [LoginStateEnum.LOGIN]: t('sys.login.signInFormTitle'),
  //     [LoginStateEnum.REGISTER]: t('sys.login.signUpFormTitle'),
  //     [LoginStateEnum.MOBILE]: t('sys.login.mobileSignInFormTitle'),
  //     [LoginStateEnum.QR_CODE]: t('sys.login.qrSignInFormTitle'),
  //   };
  //   return titleObj[unref(getLoginState)];
  // });
</script>
<style lang="less" scoped>
  h2 {
    position: relative;

    .login-bg {
      position: absolute;
      bottom: 0;
      left: 1px;
      display: inline-block;
      width: 79px;
      height: 10px;
      background: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, #2b63a1 99%);
      border-radius: 0px 0px 0px 0px;
      opacity: 1;
      // transform: rotate(180deg);
    }
  }
</style>
